/*
 * @Author: 徐建辰
 * @Date: 2021-11-04 11:18:52
 * @LastEditTime: 2021-11-04 14:30:41
 * @LastEditors: Please set LastEditors
 * @Description: 城市列表组件
 */
import React, {memo} from 'react'
import PropTypes from 'prop-types'
import CitySection from './CitySection'
import AlphaIndex from './AlphaIndex'
import './CitySelector.css'

const CityList = memo(function CityList(props) {
  const {sections, onSelect, toAlpha} = props
  // 遍历字母表
  const alphabet = Array.from(new Array(16), (e, index) => String.fromCharCode(65 + index))
  return (
    <div className="city-list">
      <div className="city-cate">
        {sections.map(item => <CitySection key={item.title} title={item.title} cities={item.citys} onSelect={onSelect} />)}
      </div>
      <div className="city-index">
        {alphabet.map(item => <AlphaIndex onClickCb={toAlpha} key={item} alpha={item} />)}
      </div>
    </div>
  )
})

CityList.propTypes = {
  sections: PropTypes.array.isRequired,
  onSelect: PropTypes.func.isRequired,
  toAlpha: PropTypes.func.isRequired
}

export default CityList
